<template>
    <div class="hotel_list_item" v-if="hotelItem">
        <img
            :src="hotelItem.photos"
            alt
        />
        <div class="hotel_list_item_main">
            <div class="hotel_list_item_main_title">{{ hotelItem.name }}</div>
            <div class="hotel_list_item_main_content">
                <div class="details">
                    <div class="pinyin">{{ hotelItem.alias }}</div>
                    <div class="evaluation">
                        <div>
                            <el-rate
                                v-model="hotelItem.stars"
                                disabled
                                show-score
                                text-color="#ff9900"
                                score-template="{value}"
                            ></el-rate>
                        </div>
                        <div>
                            <span>{{ hotelItem.all_remarks }}</span>
                            条评价
                        </div>
                        <div>
                            <span>44</span>
                            篇游记
                        </div>
                    </div>
                    <div class="location">
                        <i class="iconfont iconlocation"></i>
                        位于: {{ hotelItem.address }}
                    </div>
                </div>
                <div class="recommend">
                    <div class="recommend_item" v-for="(item, index) in hotelItem.products" :key="index">
                        <div>{{ item.name }}</div>
                        <div>
                            <span>￥{{ item.price }}</span>
                            起
                            <i class="el-icon-arrow-right"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: ["hotelItem"],
    data() {
        return {
        };
    },
};
</script>

<style lang="less" scoped>
.hotel_list_item {
    display: flex;
    padding: 20px 0;
    border-bottom: 1px solid #ccc;
    img {
        width: 320px;
        height: 210px;
        margin-right: 10px;
        object-fit: cover;
        cursor: pointer;
    }

    .hotel_list_item_main {
        flex: 1;
        .hotel_list_item_main_title {
            font-size: 24px;
            cursor: pointer;
        }

        .hotel_list_item_main_content {
            display: flex;
            .details {
                width: 425px;
                .pinyin {
                    color: #999;
                }

                .evaluation {
                    display: flex;
                    padding: 10px 0;
                    div {
                        flex: 1;
                        text-align: center;
                        span {
                            color: orange;
                        }
                    }
                }

                .location {
                    color: #999;
                    .iconlocation {
                        color: #333;
                    }
                }
            }

            .recommend {
                width: 230px;
                margin-top: -16px;
                .recommend_item {
                    cursor: pointer;
                    display: flex;
                    justify-content: space-between;
                    padding: 16px 10px;
                    border-bottom: 1px solid #e4e4e4;
                    div {
                        flex: 1;
                        span {
                            color: orange;
                        }
                    }
                    &:hover {
                        background-color: #f5f7fa;
                    }
                }
            }
        }
    }
}
</style>
